<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


</head>
<body>
<div th:replace="fragments/header :: navbar"></div>
<div class="container-lg">
    <div class="row pt-2">
        <!--    导航侧边栏-->
        <div class="col-3">
            <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" >
                <h4 class="my-3"> 学无止境，学海无涯</h4>
                <ul class="nav nav-pills flex-column mb-auto">
                    <li class="nav-item p-2" >
                        <a class="nav-link active" aria-current="page" th:href="@{/home}"><i class="bi bi-house"></i> 我的首页</a>
                    </li>
                    <li class="nav-item  p-2" sec:authorize="hasRole('ROLE_USER')">
                        <a class="nav-link text-white" th:href="@{/profile}"><i class="bi bi-person"></i> 我的信息</a>
                    </li>
                    <li class="nav-item  p-2" sec:authorize="hasRole('ROLE_USER')">
                        <a class="nav-link text-white" th:href="@{/order}"><i class="bi bi-cart-dash"></i> 我的购物车</a>
                    </li>
                    <li class="nav-item  p-2" sec:authorize="hasRole('ROLE_USER')" >
                        <a class="nav-link text-white" th:href="@{/historyOrder}"><i class="bi bi-clipboard-minus"></i> 我的历史订单</a>
                    </li>
                    <li class="nav-item  p-2" sec:authorize="hasRole('ROLE_ADMIN')" >
                        <a class="nav-link text-white" th:href="@{/books}"><i class="bi bi-calendar"></i> 所有库存</a>
                    </li>
                    <li class="nav-item  p-2" sec:authorize="hasRole('ROLE_ADMIN')" >
                        <a class="nav-link text-white" th:href="@{/orders/all}"><i class="bi bi-file-earmark-text"></i> 所有订单</a>
                    </li>
                    <li class="nav-item  p-2" sec:authorize="hasRole('ROLE_ADMIN')" >
                        <a class="nav-link text-white" th:href="@{/users}"><i class="bi bi-people"></i> 所有用户</a>
                    </li>
                </ul>
                <hr>
                <div class="dropdown" sec:authorize="isAuthenticated()">
                    <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
                        <strong>User</strong>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
                        <li><a class="dropdown-item" href="#">设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/profile">个人中心</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" th:href="@{/logout}">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--    添加轮播图-->
        <div class="col-9">
            <div id="demo" class=" carousel slide " data-bs-ride="carousel">
                <!-- Indicators/dots -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
                </div>
                <!-- The slideshow/carousel -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="images/促销活动.jpg" class="d-block" style="width:100%">
                        <div class="carousel-caption">
                            <h3></h3>
                            <p></p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/习近平语录.jpg" class="d-block" style="width:100%">
                        <div class="carousel-caption">
                            <h3></h3>
                            <p></p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/自然生活.jpg" class="d-block" style="width:100%">
                        <div class="carousel-caption">
                            <h3></h3>
                            <p></p>
                        </div>
                    </div>
                </div>
                <!-- Left and right controls/icons -->
                <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
<!--添加图书列表-->
            <div class="container">
                <h3 class="mt-3 mb-3">图书列表</h3>
                <div class="row">
                    <div class="col-md-4" th:each="book : ${books}">
                        <div class="card mb-4">
                            <a th:href="@{'/book/view/'+${book.bookId}}" class="text-center p-1">
                                <img th:src="@{|/bookImage?bookId=${book.bookId}|} " style="width:120px;height: 180px" class="card-img-top" alt="Book Image">
                            </a>
                            <div class="card-body">
                                <h5 class="card-title" th:text="${book.bookName}"></h5>
                                <p class="card-text">作者: <span th:text="${book.BookAuthor}"></span></p>
                                <p class="card-text">价格: <span th:text="${book.bookPrice}"></span></p>
                                    <a  class="btn btn-primary" th:data-book-id="${book.bookId}"
                                        th:href="@{'/order/addBook/{bookId}'(bookId=${book.bookId})}">加入购物车</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>


</html>